import color from '@/mixins/color';
<template>
  <!-- 路程管理详情 -->
  <div class="itineraryDetail">
    <!-- 返回按钮 -->
    <div class="page-header">
      <el-button type="primary" icon="el-icon-back" @click="goBack">返回列表</el-button>
    </div>
    <el-row :gutter="24">
      <el-col :span="12">
        <!-- 左侧车主信息 -->
        <el-card class="box-card card-box">
          <div slot="header" class="clearfix" style="display: flex;align-items: center;">
            <p style="font-size: 14px; font-weight: bold">车主信息</p>
            <div style="margin-left: 25px;font-size: 14px;display: flex;align-items: center;">
              <div
                v-if="lineData && lineData.detail && lineData.detail.user && (lineData.detail.user.avatar || lineData.detail.user.avatar_full)"
                style="display: inline-block;">
                <img :src="lineData.detail.user.avatar || lineData.detail.user.avatar_full"
                  style="width: 20px;height: 20px;border-radius: 50%;object-fit: cover;" @error="handleImageError" />
              </div>
              <div v-else
                style="display: inline-block;width: 20px;height: 20px;background-color: #F2F2F2;border-radius: 50%;">
              </div>
              <div style="font-size: 13px;display: inline-block;margin-left: 10px;">
                {{ lineData && lineData.detail && lineData.detail.user ? lineData.detail.user.nickname || '未知用户' :
                  '未知用户'
                }}
                {{ lineData && lineData.detail && lineData.detail.user ? lineData.detail.user.phone || '' : '' }}
                ({{ lineData && lineData.detail && lineData.detail.user ? lineData.detail.user.car_owner_type_text ||
                  '未知类型' : '未知类型' }})
              </div>
            </div>
          </div>
          <!-- 内容区域 -->
          <div class="text item">
            <!-- 内容路线 -->
            <p style="line-height: 10px;">
              <span style="font-size: 13px;font-weight: bold;margin: 0 15px;">
                {{ lineData && lineData.detail ? lineData.detail.start_title || '未知' : '未知' }}
                <i size="20" style="transform: rotate(450deg)" class="el-icon-sort-up"></i>
                {{ lineData && lineData.detail ? lineData.detail.end_title || '未知' : '未知' }}
              </span>
              <span style="font-size: 13px;font-weight: bold;margin: 0 15px;">
                {{ lineData && lineData.detail ? lineData.detail.start_time || '未知时间' : '未知时间' }}
              </span>
              <span style="font-size: 13px;font-weight: bold;">￥{{ lineData && lineData.detail ?
                lineData.detail.unit_price || '0' : '0' }}/座</span>
            </p>
            <!-- 订座数量 -->
            <p class="seats">订座：{{ lineData && lineData.detail ? lineData.detail.on_order || '0' : '0' }} | {{ lineData
              && lineData.detail ? lineData.detail.status_text || '未知状态' : '未知状态' }}</p>
            <!-- 出发地 -->
            <div class="detail-list">
              <div class="detail-item">
                <span class="dot"></span>
                <span class="label">出发地</span>
                <span class="value">{{ lineData && lineData.detail ? lineData.detail.start_title || '未知' : '未知'
                  }}</span>
              </div>

              <div class="detail-item">
                <span class="dot"></span>
                <span class="label">目的地</span>
                <span class="value">{{ lineData && lineData.detail ? lineData.detail.end_title || '未知' : '未知' }}</span>
              </div>

              <div class="detail-item">
                <span class="dot"></span>
                <span class="label">途径</span>
                <span class="value">{{ lineData && lineData.detail ? lineData.detail.approach || '无' : '无' }}</span>
              </div>

              <div class="detail-item">
                <span class="dot"></span>
                <span class="label">出行车辆</span>
                <span class="value">
                  {{ lineData && lineData.detail && lineData.detail.car ? lineData.detail.car.brand_model || '未知车型' :
                    '未知车型' }}-
                  {{ lineData && lineData.detail && lineData.detail.car ? lineData.detail.car.car_number || '未知车牌' :
                    '未知车牌' }}
                  【{{ lineData && lineData.detail && lineData.detail.car ? lineData.detail.car.seats || '0' : '0' }}座】
                </span>
              </div>

              <div class="detail-item">
                <span class="dot"></span>
                <span class="label">可订座数量</span>
                <span class="value">【{{ lineData && lineData.detail && lineData.detail.car ?
                  lineData.detail.current_seats || '0' : '0' }}座】</span>
              </div>

              <div class="detail-item">
                <span class="dot"></span>
                <span class="label">备注</span>
                <span class="value">{{ lineData && lineData.detail ? lineData.detail.remark || '无' : '无' }}</span>
              </div>
            </div>
            <!-- 横线 -->
            <div style="width: 100%;background-color: #EDEFEF;height: 2px;padding:0 20px;margin-left: -20px;"></div>
            <!-- 费用信息 -->
            <div class="fee-info">
              <div class="fee-row">
                <span>本次获得信息费抵扣额：</span>
                <span class="fee-value">¥{{ lineData && lineData.detail && lineData.detail.car ?
                  lineData.detail.deduction_amount || '0.00' : '0.00' }}</span>
              </div>
              <div style="width: 100%;background-color: #EDEFEF;height: 0.5px;padding:0 40px;margin-left: -50px;"></div>
              <div class="fee-row highlight">
                <span>实际需收总额：</span>
                <span class="fee-value">¥{{ lineData && lineData.detail ? lineData.detail.income || '0.00' : '0.00'
                  }}</span>
              </div>
              <div style="width: 100%;background-color: #EDEFEF;height: 0.5px;padding:0 40px;margin-left: -50px;"></div>
              <div class="fee-row displays">
                <span>本行程信息费收取比例：</span>
                <span class="fee-value">{{ lineData && lineData.detail ? (Number(lineData.detail.service_fee_rate) *
                  100).toFixed(2) : '0.00' }}%</span>
              </div>
              <div class="fee-details displays">
                <div class="fee-detail-item">
                  <span>本行程应付信息费：</span>
                  <span>¥{{ lineData && lineData.detail ? lineData.detail.service_fee || '0.00' : '0.00' }}</span>
                </div>
                <div style="padding: 0 10px;font-size: 20px;color:#F2F2F2;"> |</div>
                <div class="fee-detail-item">
                  <span>抵扣信息费：</span>
                  <span>¥{{ lineData && lineData.detail ? lineData.detail.deduction_amount ||
                    '0.00' : '0.00' }}</span>
                </div>
                <div style="padding: 0 10px;font-size: 20px;color:#F2F2F2;"> |</div>
                <div class="fee-detail-item fee-not-font">
                  <span>需付信息费：</span>
                  <span>¥{{ lineData && lineData.detail ? lineData.detail.actual_service_fee || '0.00' : '0.00'
                    }}</span>
                  <!-- <span>¥{{ calculatePayableServiceFee() }}</span> -->
                </div>
              </div>
              <div style="width: 100%;background-color: #EDEFEF;height: 0.5px;padding:0 40px;margin-left: -50px;"></div>
              <div class="fee-row">
                <span>本行程推广人提成比例：</span>
                <span class="fee-value">{{ lineData && lineData.detail && lineData.detail.promotion &&
                  lineData.detail.promotion.rate ?
                  (Number(lineData.detail.promotion.rate) * 100).toFixed(2) : '0.00' }}%</span>
                <!-- <span class="fee-value">{{ getPromotionFeePercentage('promotor_car_owner_service_fee') }}%</span> -->
              </div>
              <div class="fee-details">
                <div class="fee-detail-item fee-not-font">
                  <span>推广人提成：</span>
                  <span>¥{{ lineData && lineData.detail && lineData.detail.promotion && lineData.detail.promotion.amount
                    ?
                    lineData.detail.promotion.amount : '0.00' }}</span>
                  <!-- <span>¥{{ calculateOwnerPromotionFee() }}</span> -->
                </div>
                <div class="fee-detail-item fee-items">
                  <span style="display: inline-block;margin-left: 15px;">
                    {{ lineData && lineData.detail && lineData.detail.user ? lineData.detail.user.nickname || '未知用户' :
                      '未知用户' }}
                    {{ lineData && lineData.detail && lineData.detail.user ? lineData.detail.user.phone || '' : '' }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
        <el-card class="card-box" style="display: flex;width: 100%;justify-content: space-between;">
          <span class="item-one">投诉信息</span>
          <span class="item-two">{{ lineData ? lineData.complaintCount || '0' : '0'
            }}条投诉信息</span>
        </el-card>
        <el-card class="card-box boxs">
          <span class="item-one">评价信息</span>
          <span class="item-two">{{ lineData ? lineData.evaluationCount || '0' : '0'
            }}条评价信息</span>
        </el-card>
        <el-card class="card-box boxs">
          <span class="item-one">聊天记录</span>
          <span class="item-two">{{ lineData ? lineData.chatCount || '0' : '0' }}条聊天记录</span>
        </el-card>
      </el-col>
      <el-col :span="12">
        <!-- 右侧用户信息 -->
        <el-card class="box-card card-box">
          <div slot="header" class="clearfix" style="display: flex;align-items: center;">
            <p style="font-size: 14px; font-weight: bold">出行乘客信息 【{{ lineData && lineData.lineOrder ?
              lineData.lineOrder.length : '0' }}人】
            </p>
            <p style="margin-left: 25px;font-size: 14px;display: flex;align-items: center;"></p>
          </div>
          <!-- 乘客列表 -->
          <div v-for="(passenger, index) in lineData && lineData.lineOrder ? lineData.lineOrder : []" :key="index"
            class="passenger-item">
            <div class="passenger-basic passenger-common">
              <div>
                <span class="passenger-name">
                  <div v-if="passenger.user && (passenger.user.avatar || passenger.user.avatar_full)"
                    style="display: inline-block;vertical-align: middle;">
                    <img :src="passenger.user.avatar || passenger.user.avatar_full"
                      style="width: 20px;height: 20px;border-radius: 50%;object-fit: cover;margin-right: 10px;"
                      @error="handleImageError" />
                  </div>
                  <div v-else class="circle" style="display: inline-block;vertical-align: middle;"></div>
                  {{ passenger.user ? passenger.user.nickname || '未知用户' : '未知用户' }}（{{ passenger.user ?
                    passenger.user.phone || '未知电话' : '未知电话' }}）
                </span>
                <el-tag size="small">{{ passenger.seats || '0' }}座</el-tag>
              </div>
              <div class="passenger-time">{{ lineData && lineData.detail ? lineData.detail.start_time || '未知时间' : '未知时间'
                }}</div>
            </div>
            <div class="passenger-location passenger-common">
              <span class="label">上车点</span>
              <span class="value">{{ passenger.boarding_location || '未知地点' }}<span
                  style="padding: 5px 10px;margin-left: 30px;background-color: #03BF16;color: #fff;font-weight: normal;font-size: 12px;">{{
                    passenger.status_text || '未知状态' }}</span></span>
            </div>
            <div class="passenger-payment passenger-common">
              <span class="label">订座总额：<span class="amount">¥{{ passenger.amount || '0.00' }}</span></span>
              <span class="line">|</span>
              <span class="label1">优惠券：<span class="coupon">-¥{{ passenger.coupon_amount || '0.00' }}</span></span>
              <span class="line">|</span>
              <span class="label">实际需付：<span class="total">¥{{ passenger.payment_amount || '0.00' }}</span></span>
            </div>
            <div class="promoter-info passenger-common">
              <span class="label">本行程推广人提成比例：
                {{ passenger.promotion && passenger.promotion.rate ? (passenger.promotion.rate * 100).toFixed(2) :
                  '0.00' }}%

                <!-- {{ getPromotionFeePercentage('promotor_passenger_service_fee') }}% -->
              </span>
              <span class="labels">推广人提成：<span class="promoter-amount">
                  ¥{{ passenger.promotion && passenger.promotion.amount ? passenger.promotion.amount : '0.00' }}
                </span></span>
              <span class="label_user">{{ lineData && lineData.detail && lineData.detail.user ?
                lineData.detail.user.nickname || '未知用户' : '未知用户' }} {{ lineData && lineData.detail &&
                  lineData.detail.user ? lineData.detail.user.phone || '' : '' }}</span>
            </div>
            <div v-if="index < (lineData && lineData.lineOrder ? lineData.lineOrder.length - 1 : 0)" class="line"
              style="width: 100%;background-color: #F0F2F5;height:1px;padding: 0 20px;margin-left: -20px;"></div>
          </div>
        </el-card>

        <!-- 退订乘客 -->
        <!-- <el-card class="box-card card-box">
          <div slot="header" class="clearfix" style="display: flex;align-items: center;">
            <p style="font-size: 14px; font-weight: bold">退订乘客信息 【0人】 <span
                style="padding: 5px 10px;background-color: #AAAAAA;color: #fff;font-weight: normal;font-size: 12px;">已退订</span>
            </p>
            <p style="margin-left: 25px;font-size: 14px;display: flex;align-items: center;"></p>
          </div>
          <div class="passenger-item">
            <div class="passenger-basic passenger-common">
              <div>
                <span class="passenger-name">暂无退订乘客</span>
              </div>
            </div>
          </div>
        </el-card> -->

      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getlineDetail } from './api';
import { getConfigList } from '@/views/systemConfigCenter/api/config';

export default {
  data () {
    return {
      lineData: null,          // 线路详情数据
      configData: null,        // 配置数据
    };
  },
  created () {
    const id = this.$route.query.id;
    console.log('获取到的ID:', id);
    this.fetchDetailData(id);
    this.fetchConfigData(); // 调用获取配置数据的方法
  },
  methods: {
    async fetchDetailData (id) {
      try {
        const response = await getlineDetail(id);
        // console.log('获取到的详情数据:', response);
        this.lineData = response.data;

        // 调试头像数据
        if (this.lineData && this.lineData.detail) {
          // console.log('车主头像:', this.lineData.detail.user && this.lineData.detail.user.avatar);
          // console.log('车主用户信息:', this.lineData.detail.user);
        }

        if (this.lineData && this.lineData.lineOrder) {
          this.lineData.lineOrder.forEach((passenger, index) => {
            // console.log(`乘客${index + 1}头像:`, passenger.user && passenger.user.avatar);
            // console.log(`乘客${index + 1}用户信息:`, passenger.user);
          });
        }
      } catch (error) {
        console.error('获取详情数据失败:', error);
        this.$message.error('获取详情数据失败');
      }
    },
    async fetchConfigData () {
      try {
        const response = await getConfigList();
        if (response.err === 0) {
          this.configData = response.data;
        } else {
          console.error('获取配置数据失败:', response.msg);
        }
      } catch (error) {
        console.error('获取配置数据失败:', error);
      }
    },
    // 根据code获取配置值
    getConfigValue (code) {
      if (!this.configData || !Array.isArray(this.configData)) return null;
      const configItem = this.configData.find(item => item.code === code);
      return configItem ? configItem.value : null;
    },
    // 获取推广费提成比例（转换为百分比显示）
    getPromotionFeePercentage (code) {
      const value = this.getConfigValue(code);
      if (value !== null) {
        // 后台返回的是小数，需要转换为百分比显示
        return (Number(value) * 100).toFixed(2);
      }
      return '0.00';
    },
    // 计算推广人提成金额
    calculatePromotionFee (passenger) {
      if (!passenger || !passenger.amount) return 0;

      // 获取乘客行程推广费比例
      const promotionRate = this.getConfigValue('promotor_passenger_service_fee');
      if (promotionRate === null) return 0;

      // 计算推广费 = 乘客支付金额 × 推广费比例
      const amount = Number(passenger.amount);
      const rate = Number(promotionRate);
      return (amount * rate).toFixed(2);
    },
    // 计算车主推广人提成金额
    calculateOwnerPromotionFee () {
      if (!this.lineData || !this.lineData.detail || !this.lineData.detail.income) return 0;

      // 获取车主行程推广费比例
      const promotionRate = this.getConfigValue('promotor_car_owner_service_fee');
      if (promotionRate === null) return 0;

      // 计算推广费 = 车主收入 × 推广费比例
      const income = Number(this.lineData.detail.income);
      const rate = Number(promotionRate);
      return (income * rate).toFixed(2);
    },
    // 计算需付信息费
    calculatePayableServiceFee () {
      if (!this.lineData || !this.lineData.detail) return '0.00';

      // 本行程应付信息费
      const serviceFee = Number(this.lineData.detail.service_fee || 0);

      // 抵扣信息费
      const deductionAmount = Number(this.lineData.detail.car && this.lineData.detail.car.deduction_amount || 0);

      // 需付信息费 = 应付信息费 - 抵扣信息费
      const payableFee = serviceFee - deductionAmount;

      // 确保不为负数
      return Math.max(0, payableFee).toFixed(2);
    },
    handleImageError (event) {
      // 图片加载失败时的处理
      console.log('图片加载失败:', event.target.src);
      event.target.style.display = 'none';
      // 查找下一个兄弟元素作为备用显示
      const parent = event.target.parentElement;
      if (parent && parent.nextElementSibling) {
        parent.nextElementSibling.style.display = 'inline-block';
      }
    },
    goBack () {
      this.$router.go(-1);
    }
  }
}
</script>

<style lang="scss" scoped>
.page-header {
  border-bottom: 1px solid #f0f0f0;
}

.seats {
  width: 100px;
  padding: 2px 10px;
  margin-left: 15px;
  font-size: 13px;
  background-color: #03BF16;
  color: #fff;
}

.detail-list {
  .detail-item {
    display: flex;
    align-items: center;
    margin-left: 30px;
    margin-bottom: 12px;
    height: 30px;
    line-height: 30px;

    .dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #D7D7D7;
      border-radius: 50%;
      margin-right: 10px;
    }

    .label {
      color: #909399;
      font-size: 13px;
      min-width: 80px;
      margin-right: 10px;
    }

    .value {
      color: #606266;
      font-size: 13px;
    }
  }
}

.fee-info {
  font-size: 12px;
  margin-left: 25px;
  color: #909399;

  .fee-row {
    height: 45px;
    line-height: 45px;
  }

  .displays {
    width: 100%;
    display: flex;
    height: 45px;
    line-height: 45px;
  }

  .fee-not-font {
    color: black;
    font-weight: bold;
  }

  .fee-details {
    height: 45px;
    line-height: 45px;
    display: flex;
  }

  .fee-items {
    margin-left: 40px;
    color: blue;
    height: 45px;
    line-height: 45px;
  }
}

.card-box {
  background-color: #fff;
  margin: 10px 0;
  box-shadow: none;
  padding: 10px 0;
  position: relative;
}

.item-one {
  font-weight: bold;
  font-size: 14px;
  display: inline-block;
  margin-left: 20px;
}

.item-two {
  font-size: 12px;
  color: blue;
  position: absolute;
  right: 50px;
}

.passenger-item {
  font-size: 13px;
  margin-left: 20px;
  padding: 10px 0;

  .passenger-basic {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .el-tag {
    margin-left: 40px;
    background-color: #fff;
    color: black;
  }

  .passenger-common {
    height: 45px;
    line-height: 45px;
  }

  .circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #F2F2F2;
    margin-right: 10px;
  }

  .passenger-name {
    font-weight: bold;
  }

  .passenger-location {
    .label {
      color: #909399;
    }

    .value {
      display: inline-block;
      margin-left: 20px;
    }
  }

  .line {
    display: inline-block;
    margin: 0 10px;
    color: #909399;
    font-size: 16px;
  }

  .label {
    color: #909399;
  }

  .value {
    display: inline-block;
    margin-left: 20px;
  }

  .label1 {
    color: blue;
  }

  .labels {
    display: inline-block;
    margin-left: 30px;
    font-weight: bold;
  }

  .label_user {
    display: inline-block;
    margin-left: 30px;
    color: blue;
  }

  .card-boxs {
    margin-top: 20px;
  }
}
</style>
